// 登录模块的实现
var login = document.querySelector('.login');
var mask = document.querySelector('.login-bg');
var zhuce = document.querySelector('.zhuce');
var zhucebtn = document.querySelector('#zhuceBtn')
var link = document.querySelector('#link');
var zhucelink = document.querySelector('#zhucelink')
var closeBtn = document.querySelector('#closeBtn');
var zhucecloseBtn = document.querySelector('#zhucecloseBtn');
var title = document.querySelector('#title');
//点击closeBtn让mask和login隐藏起来
closeBtn.addEventListener('click',function(){
    mask.style.display = 'none';
    login.style.display = 'none';
    zhuce.style.display = 'none';
})
zhucecloseBtn.addEventListener('click',function(){
    mask.style.display = 'none';
    login.style.display = 'none';
    zhuce.style.display = 'none';
})
//点击“请登录” 让mask和login显示出来
link.addEventListener('click',function () {
    mask.style.display = 'block';
    login.style.display = 'block';
  })
//点击注册的时候显示注册页面
zhucebtn.addEventListener('click',function(){
    mask.style.display = 'block';
    login.style.display = 'none';
    zhuce.style.display = 'block';
})
//点击“免费注册”时，显示注册页面
zhucelink.addEventListener('click',function(){
    mask.style.display = 'block';
    login.style.display = 'none';
    zhuce.style.display = 'block';
})
//鼠标的拖动效果
//（1）当我们鼠标按下时，就获得鼠标在盒子内的坐标
title.addEventListener('mousedown',function(e){
    var x = e.pageX - login.offsetLeft;
    var y = e.pageY - login.offsetTop;
    //（2）鼠标移动的时候，把鼠标在页面中的坐标 减去 鼠标在盒子中的坐标就是盒子新的坐标
    document.addEventListener('mousemove',move)
    function move(e){
        login.style.left = e.pageX - x + 'px';
        login.style.top = e.pageY - y + 'px';
    }
    document.addEventListener('mouseup', function(){
        document.removeEventListener('mousemove',move);
    })
})
//轮播图的实现
var tbimg = $('.tb-img');
var lis = $('.promo-nav').children('li');
var timer;
var indexs = 0 ;//关键变量，全程只用这个变量指定图片的切换
var v = tbimg.length;
$('.tb-promo').mouseover(function(){
    stop();    
})                 //用于鼠标进入轮播图区域停止轮播
$('.tb-promo').mouseout(function(){
    play();
})                 //用于鼠标离开轮播图区域开始轮播
//轮播图播放的函数
function play(){
    //定时播放
    timer = setInterval(function (){
        indexs +=1 ;
        if (indexs == v){
            indexs = 0
        }
        for(var i = 0 ; i < lis.length ; i++){
            lis[i].className ='';
        }
        lis[indexs].className = 'sleceted';
        for(var i = 0 ; i < tbimg.length ; i++){
            tbimg[i].style.display = 'none';}
            tbimg[indexs].style.display = 'block';
    },3000)
  }
  //播放停止
function stop(){
    clearInterval(timer);
}
// 向右轮转
$('.tb-promo .next').click(function(){
    indexs++;
        for(var i = 0 ; i < tbimg.length ; i++){
            tbimg[i].style.display = 'none';}//隐藏所有元素，显示指定元素
            if (indexs == tbimg.length){
                indexs=0;
            }
        tbimg[indexs].style.display = 'block';
        for(var i = 0 ; i < lis.length ; i++){
            lis[i].className ='';           //隐藏所有元素，显示指定元素
        }
        lis[indexs].className = 'sleceted';
})
// 向左轮转
$('.tb-promo .prev').click(function(){
    if (v == tbimg.length && indexs == 0){
        indexs = v;
        v--;
    }//只执行一次，给indexs重新赋值
    indexs--;
    for(var i = 0 ; i < tbimg.length ; i++){
            tbimg[i].style.display = 'none';}
            if (indexs < 0 ){
                indexs = tbimg.length -1;
            } 
            tbimg[indexs].style.display = 'block';
            for(var i = 0 ; i < lis.length ; i++){
            lis[i].className ='';
        }
        lis[indexs].className = 'sleceted';
})
// 小圆点切换
for(var i = 0 ; i < lis.length ; i++){
    lis[i].setAttribute('index',i);
    lis[i].addEventListener('click',function(){
        for(var i = 0 ; i < lis.length ; i++){
            lis[i].className ='';
        }
        this.className = 'sleceted';
        var index = this.getAttribute('index');
        for(var i = 0 ; i < tbimg.length ; i++){
            tbimg[i].style.display = 'none';}
            tbimg[index].style.display = 'block';
    })
}
//jd轮播图
var jdimg = $('.jd-img');
var index = 0 ;//关键变量，全程只用这个变量指定图片的切换
var j = jdimg.length;
var timers;
$('.jd-promo').mouseover(function(){
    stops();    
})                 //用于鼠标进入轮播图区域停止轮播
$('.jd-promo').mouseout(function(){
    plays();
})                 //用于鼠标离开轮播图区域开始轮播
//轮播图播放的函数
function plays(){
    //定时播放
    timers = setInterval(function (){
        index +=1 ;
        if (index == j){
            index = 0
        }
        for(var i = 0 ; i < jdimg.length ; i++){
            jdimg[i].style.display = 'none';}
            jdimg[index].style.display = 'block';
            
    },5000)
  }
  //播放停止
function stops(){
    clearInterval(timers);
}
// 向右轮转
$('.jd-promo .next').click(function(){
    index++;
        for(var i = 0 ; i < jdimg.length ; i++){
            jdimg[i].style.display = 'none';}//隐藏所有元素，显示指定元素
            if (index == jdimg.length){
                index = 0;
            }
        jdimg[index].style.display = 'block';
})
// 向左轮转
$('.jd-promo .prev').click(function(){
    if (j == jdimg.length && index == 0){
        index = j;
        j--;
    }//只执行一次，给indexs重新赋值
    index--;
    for(var i = 0 ; i < jdimg.length ; i++){
            jdimg[i].style.display = 'none';}
            if (index < 0 ){
                index = jdimg.length -1;
            } 
            jdimg[index].style.display = 'block';
})
